<template>
  <header-bar></header-bar>
  <div class="gray-row">
    <div class="text">上传</div>
  </div>
  <div>
    <el-upload class="upload-demo" drag :action="targetUrl" :on-success="handleSuccess"
               :before-upload="beforeUpload">
      <div class="el-upload__text">拖拽图图或者 <em>点击这里</em></div>
      <template #tip>
        <div class="el-upload__tip">仅支持上传单张图片，且为.png格式（服务器上传完毕大约需要2分钟）</div>
      </template>
    </el-upload>
  </div>
</template>

<script lang="ts" setup>
import {ElMessage} from "element-plus";
import {defineComponent} from "vue";
import HeaderBar from "@/components/HeaderBar.vue";
import {BASE_URL} from "@/api/config";

const targetUrl = BASE_URL + "/upload/";
const beforeUpload = (file: any) => {
  const isPNG = file.type === 'image/png';
  if (!isPNG) {
    ElMessage.error('上传图片只能是 PNG 格式!');
  }
  return isPNG;
}
const handleSuccess = (res: any, file: any) => {
  console.log(res)
  ElMessage({
    message: res.msg,
    type: res.type,
  });
}
</script>

<style scoped lang="less">
.gray-row {
  background-color: #f5f5f5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;

  .text {
    font-weight: 700;
  }
}
</style>
